<template>
    <div class="content_base">
        <div class="upTo">
            <h2 class="title">{{detialMes.dikeName}}圩堤基本信息</h2>
            <el-form :model="detialMes" label-position = 'right' class="clearfix">
              <el-form-item label="圩堤名称：">
                <div>{{detialMes.dikeName}}</div>
              </el-form-item>
              <el-form-item label="所在设区市：">
                 <div>{{detialMes.city}}</div>
              </el-form-item>
              <el-form-item label="所在县（市，区）：">
               <div>{{detialMes.county}}</div> 
              </el-form-item>  
              <el-form-item label="所在河流：">
                  <div class="detialdata">{{detialMes.inRivers}} </div>
              </el-form-item>
              <el-form-item label="保护面积（万亩）：">
                  <div class="detialdata">{{detialMes.protectArea}}</div>
              </el-form-item>
              <el-form-item label="保护耕地面积（万亩）：">
                  <div class="detialdata">{{detialMes.protectCultivateArea}}</div>
              </el-form-item>
              <el-form-item label="保护（受益）人口（万人）:">
                  <div class="detialdata">{{detialMes.protectPeople}}</div>
              </el-form-item>
              <el-form-item label="堤线长度（km）：">
                <div class="detialdata">{{detialMes.dikeLength}}</div>
              </el-form-item>
              <el-form-item label="批复治理长度（km）：">
                <div class="detialdata">{{detialMes.governDiskLength}}</div>
              </el-form-item>
              <el-form-item label="可研 - 批复文件：">
                <template slot-scope="scope">
                       <a :href="url1" class="downlink">{{name1}}</a>
                     </template>
              </el-form-item>
              <el-form-item label="可研 - 估算表：">
               <template slot-scope="scope">
                       <a :href="url2" class="downlink">{{name2}}</a>
                     </template> 
              </el-form-item>
              <el-form-item label="初设 - 批复文件：">
               <template slot-scope="scope">
                       <a :href="url3" class="downlink">{{name3}}</a>
                     </template>
              </el-form-item>
              <el-form-item label="初设 - 概算表：">
                 <template slot-scope="scope">
                       <a :href="url4" class="downlink">{{name4}}</a>
                     </template>
              </el-form-item>
              <el-form-item label="备注：" class="addWid">
                <div>{{detialMes.note}}</div> 
              </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
         detialMes:{
           city:'',
           county:'',
           dikeName:'',
           inRivers:'',
           protectArea:'',
           protectCultivateArea:'',
           protectPeople:'',
           dikeLength:'',
           governDiskLength:'',
           note:'',
           dikeCode:'',
         },
        //四个文件的下载地址
        name1:'',
        name2:'',
        name3:'',
        name4:'',
        url1:'',
        url2:'',
        url3:'',
        url4:'',
        }
    },
    methods:{
        //初始化四个文件的下载地址
        getURL(data){
            var url =this.$axios.defaults.baseURL+'/dikeInfo/file/downloaddikeinfo/?path='
            if(data.feasibleDocument){
                //encodeURL进行编码，解决ie问题
                var urlCode = encodeURI(encodeURI(data.feasibleDocument))
                this.url1 = url+urlCode
                var name = data.feasibleDocument.split('/')
                this.name1 = name[name.length-1]
            }else{
                this.name1 ='暂无文件可供查看'
                this.url1 = 'javascript:void(0);'
            }
            if(data.feasibleTable){
                var urlCode = encodeURI(encodeURI(data.feasibleTable))
                this.url2 = url+urlCode
                var name = data.feasibleTable.split('/')
                this.name2 = name[name.length-1]
            }else{
                this.name2 ='暂无文件可供查看'
                this.url2 = 'javascript:void(0);'
            }
            if(data.initDocument){
                var urlCode = encodeURI(encodeURI(data.initDocument))
                this.url3 = url+urlCode
                var name = data.initDocument.split('/')
                this.name3 = name[name.length-1]
            }else{
                this.name3 ='暂无文件可供查看'
                this.url3 = 'javascript:void(0);'
            }
             if(data.initTable){
                var urlCode = encodeURI(encodeURI(data.initTable))
                this.url4 = url+urlCode
                var name = data.initTable.split('/')
                this.name4 = name[name.length-1]
            }else{
                this.name4 ='暂无文件可供查看'
                this.url4 = 'javascript:void(0);'
            }
        }
        
    },
   mounted(){
   var dikeCode = this.$route.params.dikeCode;
    //请求数据初始化
    var _this = this
    var thisDate = (new Date()).getTime()
    this.$axios.get(`/dikeInfo/getdikeinfobycode/${dikeCode}`,{params:{
        thisDate:thisDate
    }}).then(function(res){
         var codeMes = res.data.responseCode
         if(codeMes=='101'){
                _this.$router.push({name:'login'})
           }else{
           var data  = res.data.responseData
           _this.detialMes = data
            _this.getURL(_this.detialMes)
            }
    }).catch(function(err){
      console.log(err)
    })
   }
}
</script>
<style>
.el-form-item__label .el-form-item__content{
      font-size:17px!important 
  }
</style>

<style scoped>
 .clearfix:after{
        content: '';
        height: 0;
        clear: both;
        display: block;
   }
  .title{
       height: 100px;
       line-height: 100px;
   }
   .upTo{
       width: 90%;
       margin: 0 auto;
   }
   .upTo .el-form-item{
       width: 40%;
       float: left;
       margin-left:5% 
   }
    .el-form-item__content div{
       width:28%;
       float: left;
       text-align: left;
       margin-left:8%
   }
   .addWid .el-form-item__content div{
         width:280px;
   }
   .content[data-v-5e19321e]{
       float: left;
       position: relative;
       left: 120px;

       width: 400px;
   }
   .el-form-item__content .content[data-v-5e19321e][data-v-5e19321e]{
       width: 55%;
       
   }
   .downlink{
       text-decoration:none;
   }
   .el-form-item__label,.detialdata{
    font-size:16px 
  }
  .detialdata,.el-form-item__content div{
    /* padding-left: 10px; */
    font-size:16px 
  }
  .el-menu-item span,.el-badge {
    font-size:16px
  }
  .el-submenu__title *{
    font-size:16px
  }

</style>

